import React, { Component } from 'react'
import './GoodsCard.css'
import sub from '../../imgs/index/sub.png'
import add from '../../imgs/index/add.png'
import {numToFloat} from '../../utils/NumUtil'

export default class GoodsCard extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            base:this.props.base
        }
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({base:nextProps.base})
    }

    //购物车卡片减法控制器
    _dsc = index => {
        let count = this.props.base[index].count
        let base = this.state.base
        if(count > 1){
            count--
        }
        base[index].count=count
        this.setState({base})
    }

    //购物车卡片加法控制器
    _add = index => {
        let count = this.props.base[index].count
        let base = this.state.base
        if(count < 99){
            count++
        }
        base[index].count=count
        this.setState({base})
    }

    render() {
        return (
            <div className="goods-container">
                {this.props.base.map((item,index)=>{
                    return  <div className="goods" key={index}>
                                <div className="goods-img">
                                    <img className="goodesImg" src={item.img} alt=""/>
                                </div>
                                <div className="goods-name">{item.name}</div>
                                <div className="goods-cencost">
                                    <div className="goods-cost">￥{numToFloat(item.price)}</div>
                                    <div className="goods-add-sub">
                                        <div className="goods-handle"><img className="goods-handle-img" src={sub} alt="" onClick={()=>this._dsc(index)}/></div>
                                        <div className="goods-num">{item.count}</div>
                                        <div className="goods-handle"><img className="goods-handle-img" src={add} alt="" onClick={()=>this._add(index)}/></div>
                                    </div>
                                </div>
                                <div className="goods-submit">
                                    <div className="goods-submit-button" onClick={()=>this.props._submit(item)}>订购</div>
                                </div>
                            </div>
                })}
                <i/><i/><i/>
            </div>
        )
    }
}
